<template>
  <el-autocomplete
    class="inline-input"
    v-model="currentValue"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入商品名称"
    @select="handleSelect" style="width: 100%"
    @blur="handleBlur"
  >
    <i
      class="el-icon-search el-input__icon"
      slot="suffix">
    </i>
    <template slot-scope="props">
      <div class="good-small-info">
        <div class="good-small-pic">
          <img :src="props.item|goodImg">
        </div>
        <div class="good-small-name">
          <div>商品名称: {{props.item.name }}</div>
          <div>商品品牌: {{props.item.brand.name}}</div>
        </div>
      </div>
    </template>
  </el-autocomplete>
</template>
<script>
  import AdminService from 'src/service/admin'
  import emitter from 'src/components/emitter'

  export default {
    name: 'HGoodChoose',
    mixins: [emitter],
    data() {
      return {
        currentValue: null,
        currentId: this.id,
        loading: false,
        oldquery: null,
        datas: null,
        search: {
          name: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          isShow: 1,
          status: 1,
          orderBy: 'id desc'
        },

      }
    },
    filters: {
      goodImg: function (data) {
        if (data != null && data.imgs != null && data.imgs.length > 0) {
          return data.imgs[0]
        }
        return null
      }
    },
    props: {
      value: {
        type: String
      },
      validateEvent: {
        type: Boolean,
        default: true
      },
      id: {
        type: Number
      }
    },
    watch: {
      id(curValue, oldValue) {
        const me = this
        if (this.currentId != curValue) {
          if (curValue != oldValue) {
            if (curValue != null) {
              AdminService.goodById(curValue).then(data => {
                if (data != null && data.datas != null && data.datas.length > 0) {
                  me.currentValue = data.datas[0].name
                  me.datas = data.datas
                  me.currentId = curValue
                } else {
                  me.datas = []
                }
              })
            }
          }
        }
      }
    },
    methods: {
      handleSelect(item) {
        const me = this
        this.currentId = item.id
        this.currentValue = item.name
        me.oldquery = this.currentValue
        this.$emit('input', item.name)
        this.$emit('update:id', item.id)
        this.$emit('change', item)
        if (this.validateEvent) {
          me.dispatch('ElFormItem', 'el.form.change', [this.currentValue])
        }
      },
      handleBlur: function (event) {
        this.currentId = null
        if (this.value != this.currentValue) {
          this.$emit('input', this.currentValue)
          this.$emit('update:id', null)
          if (this.validateEvent) {
            this.dispatch('ElFormItem', 'el.form.change', [this.currentValue])
          }
        }
      },
      querySearchAsync(queryString, cb) {
        const me = this
        if (queryString == me.oldquery) {
          cb(me.datas)
        } else {
          if (queryString !== undefined && queryString !== '') {
            me.search.name = queryString
          } else {
            me.search.name = null
          }
          AdminService.searchGood(me.search).then(data => {
            if (data != null) {
              me.oldquery = queryString
              me.datas = data.datas
              cb(me.datas)
            } else {
              me.datas = []
              cb([])
            }
          })
        }
      }
    },
    mounted: function () {
      const me = this
      if (this.id != null) {
        AdminService.goodById(this.value).then(data => {
          if (data != null && data.datas != null && data.datas.length > 0) {
            me.datas = data.datas
            me.currentId = data.datas[0].id
            me.currentValue = data.datas[0].name
          } else {
            me.datas = []
          }
        })
      }
    }
  }
</script>
